<template>
  <div class="start-page-view" :style="bgView">
    <div class="head">
      <!-- <img :src="musicIcon" class="music" @click="changeMusicPlay"> -->
      <Musicbg></Musicbg>
      <Result></Result>
      <img :src="ruleBg" class="rule" @click="visible=true">
    </div>

    <Hand @handClick="startGame"></Hand>
    <div class="coupon-btn" v-show="$store.state.coupon!=''">
      <span @click="openMar">我的兑换码</span>
    </div>
    <!-- <ShakeHand></ShakeHand> -->
    <div class="logo">
      <img :src="hzImg"> 
    </div>

    <Dialog :visible.sync="visible">
      <div slot="content"  >
        <rule @close="visible=false"></rule>
      </div>
    </Dialog>

    <Dialog :visible.sync="visible1">
      <div slot="content" >
        <got-award @close="visible1=false"></got-award>
      </div>   
    </Dialog>
  </div>
</template>
<script>
let bg1 = require('./../assets/imgs/start-page-view.jpg')

import Dialog from './../components/dialog.vue'
import Result from './../components/my-order-result.vue'
import Hand from './../components/hand.vue'
import ShakeHand from './../components/shake-hand.vue'
import Musicbg from './../components/music-bg.vue'
import Utils from './../utils.js'
import Rule from './../components/rule.vue'
import GotAward from './../components/got-award.vue'
import { Toast } from 'mint-ui'


export default {
  name: "Start",
  components:{
    Dialog,
    Result,
    Hand,
    Musicbg,
    Rule,
    ShakeHand,
    GotAward
  },
  data () {
    return {
      bgView:{
        'background-image': `url(${bg1})`
      },
      hzImg:require('./../assets/imgs/hz-bank-logo.png'),
      ruleBg:require('./../assets/imgs/icon-rlue.png'),
      visible:false,
      visible1:false
    };
  },
  computed:{
    isPlay(){
      return this.$store.state.isPlaying
    },
    musicIcon(){
      return this.isPlay ? Utils.imgs.musicPlay : Utils.imgs.musicPause
    },

  },
  mounted(){
    let vm = this
    this.$store.dispatch('getFriendsList').then(()=>{
      wx.ready(()=>{
        wx.onMenuShareTimeline(vm.$store.getters.wxShareData)
        wx.onMenuShareAppMessage(vm.$store.getters.wxShareData)
      }) 
    })
  },
  methods:{
    openMar(){
      this.visible1 = true
    },
    changeMusicPlay(){
      this.$store.commit('updateMusicStatus',!this.isPlay)
    },
    startGame(){
      if( new Date().valueOf() < new Date(timeConfig.start).valueOf() ){
        Toast('活动还没有开始，敬请期待~')
      }else if(new Date().valueOf() > new Date(timeConfig.end).valueOf()){
        Toast('活动已经结束啦~')
      }else{
        this.$router.push({
          path:'/game'
        })
      }
      
    },
  },
}
</script>
<style lang="scss" scoped>
@import './../styles/common';

.start-page-view{
  width:100%;
  height: 100%;
  @include bg-img();
  position: relative;
  .head{
    position: absolute;
    top:2%;
    width: 100%;
    height: px2rem(80);
    text-align: center;
    .music{
      position: absolute;
      left:  px2rem(10);
      top:px2rem(6);
      // width:px2rem(120);
      // height: px2rem(120);
    }
    .rule{
      position: absolute;
      right:  px2rem(0);
      top:px2rem(6);
      height: px2rem(68);
      
    }
    .result{
      position: relative;
      left:px2rem(-10);
    }
    
  }
  
  div.logo{
    position: absolute;
    bottom: 1%;
    width: 100%;
    text-align: center;
    img{
        // width: px2rem(44);
        height: px2rem(60);
    }
    
  }
  .start-btn-wrap{
    position: absolute;
    bottom:px2rem(140);
  }
  .hand-img{
    bottom: px2rem(120);
  }
  .rule-dialog-content{
    background-color: red;
  }
  .coupon-btn{
    color: #fff;
    text-align: center;
    position: absolute;
    bottom: px2rem(90);
    width: 100%;
    span{
      width:px2rem(180);
      height: px2rem(60);
      line-height: px2rem(60);
      font-size: px2rem(26);
      text-decoration: underline;
      display: inline-block;
      @include bg-img();
      background-image: url('./../assets/imgs/home-mar.png');  
    }
  }
  
}
</style>